 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">安全中心</div>
      </div>
      <div class="content-con">
        <div>
          <div class="safe-title">
            <div class="title">
              谷歌验证
            </div>
          </div>
          <Row class="safe-content">
            <i-col span="16">
              <div>未绑定: 您未绑定谷歌验证</div>
              <div class="text-red">提示:为了您的资金安全,请尽快绑定谷歌验证码!</div>
              <div>手机客户端下载地址: Android / IOS</div>
            </i-col>
            <i-col span="8" >
              <i-button @click="modal1 = true" style="background-color: rgb(0, 150, 136); color: white;">绑定</i-button>
              <!-- <Modal
                v-model="modal1"
                title="绑定谷歌验证"
                @on-ok="ok"
                @on-cancel="cancel">
                <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="110" class="safety-item">
                <div class="modal-img">
                  <img src="../../assets/images/code.png" />
                  <p>请使用Google身份验证器扫描上方二维码</p>
                </div>
                <Form-item label="谷歌验证码" prop="code">
                  <i-input v-model="formValidate.code" size="large" placeholder="请输入谷歌验证码"></i-input>
                </Form-item>
                </i-form>
              </Modal> -->
              <Modal
                v-model="modal1"
                width="500" title="绑定谷歌验证"
                @on-ok="handleSubmit" footer-hide>
                <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="110" class="safety-item">
                  <div class="modal-img">
                    <img src="../../assets/images/code.png" />
                    <p>请使用Google身份验证器扫描上方二维码</p>
                  </div>
                  <Form-item label="谷歌验证码" prop="code">
                    <i-input v-model="formValidate.code" size="large" placeholder="请输入谷歌验证码"></i-input>
                  </Form-item>
                  <Form-item>
                    <i-button @click="handleSubmit('formValidate')" class="save" size="large">绑定</i-button>
                  </Form-item>
                </i-form>
              </Modal>
            </i-col>
          </Row>
        </div>
        <div style="margin-top: 15px;">
          <div class="safe-title">
            <div class="title">
              登录设置
            </div>
          </div>
          <Row class="safe-content">
            <i-col span="16">
              <div>已设置: 仅登录密码验证</div>
              <div class="text-red">提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责！</div>
            </i-col>
            <i-col span="8" >
              <i-button @click="modal2 = true" style="background-color: rgb(0, 150, 136); color: white;">更换</i-button>
              <Modal
                v-model="modal2"
                width="500" title="登录设置"
                @on-ok="login" footer-hide>
                <i-form ref="formLogin" :model="formLogin" :rules="ruleLogin" label-position="right" :label-width="110" class="safety-item">
                  <Form-item label="验证方式" prop="way">
                    <Radio-group v-model="formLogin.way" size="large" vertical>
                      <Radio label="one">
                          <span>仅登录密码验证</span>
                      </Radio>
                      <Radio label="two">
                          <span>登录密码+谷歌组合验证（需绑定谷歌验证）</span>
                      </Radio>
                    </Radio-group>
                  </Form-item>
                  <Form-item label="谷歌验证码" prop="code">
                    <i-input v-model="formLogin.code" size="large" placeholder="请输入谷歌验证码"></i-input>
                  </Form-item>
                  <Form-item>
                    <i-button @click="login('formLogin')" class="save" size="large">确定</i-button>
                  </Form-item>
                </i-form>
              </Modal>
            </i-col>
          </Row>
        </div>
        <div style="margin-top: 15px;">
          <div class="safe-title">
            <div class="title">
              支付设置
            </div>
          </div>
          <Row class="safe-content">
            <i-col span="16">
              <div>已设置: 仅支付密码验证</div>
              <div class="text-red">提示：建议绑定谷歌验证，若没有绑定谷歌验证，出现资金问题，本平台恕不负责！</div>
            </i-col>
            <i-col span="8" >
              <i-button @click="modal3 = true" style="background-color: rgb(0, 150, 136); color: white;">更换</i-button>
              <Modal
                v-model="modal3"
                width="500" title="支付设置"
                @on-ok="pay" footer-hide>
                <i-form ref="formPay" :model="formPay" :rules="rulePay" label-position="right" :label-width="110" class="safety-item">
                  <Form-item label="验证方式" prop="way">
                    <Radio-group v-model="formPay.way" size="large" vertical>
                      <Radio label="one">
                          <span>无需验证</span>
                      </Radio>
                      <Radio label="two">
                          <span>仅支付密码验证</span>
                      </Radio>
                      <Radio label="three">
                          <span>仅谷歌验证（需绑定谷歌验证）</span>
                      </Radio>
                      <Radio label="four">
                          <span>支付密码+谷歌组合验证（需绑定谷歌验证）</span>
                      </Radio>
                    </Radio-group>
                  </Form-item>
                  <Form-item label="谷歌验证码" prop="code">
                    <i-input v-model="formPay.code" size="large" placeholder="请输入谷歌验证码"></i-input>
                  </Form-item>
                  <Form-item>
                    <i-button @click="pay('formPay')" class="save" size="large">确定</i-button>
                  </Form-item>
                </i-form>
              </Modal>
            </i-col>
          </Row>
        </div>
      </div>
   </Card>
 </template>
 <script>
 import axios from "../../libs/axios.js";
 // const FirsModal = () => import("_c/safety-modal/firsModal");
 export default {
   name: 'safety_center',
   components:{
   },
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       modal1: false,
       modal2: false,
       modal3: false,
       formValidate:{
         code: ''
       },
       ruleValidate:{
         code:[
           {
             required: true,
             message: '请输入谷歌验证码',
             trigger: 'blur'
           }
         ]
        },
       formLogin:{
         way: 'one',
         code: ''
       },
       ruleLogin:{
         way:[
           {
             required: true,
             message: '请选择',
             trigger: 'change'
           }
         ],
         code:[
           {
             required: true,
             message: '请输入谷歌验证码',
             trigger: 'blur'
           }
         ]
        },
       formPay:{
         way: 'one',
         code: ''
       },
       rulePay:{
         way:[
           {
             required: true,
             message: '请选择',
             trigger: 'change'
           }
         ],
         code:[
           {
             required: true,
             message: '请输入谷歌验证码',
             trigger: 'blur'
           }
         ]
       }
     };
   },
   methods: {
     //表单验证
     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
           this.modal1 = false;
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     },
     login () {
       this.$refs['formLogin'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
           this.modal2 = false;
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     },
     pay () {
       this.$refs['formPay'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
           this.modal3 = false;
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     }
   }
 };
 </script>
 <!-- <template>
     <div>
     <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
     <Modal
         v-model="modal1"
         title="普通的Modal对话框标题"
         @on-ok="ok"
         @on-cancel="cancel">
         <p>对话框内容</p>
         <p>对话框内容</p>
         <p>对话框内容</p>
     </Modal>
     </div>
 </template> -->
 <!-- <script>
     export default {
         data () {
             return {
                 modal1: false
             }
         },
         methods: {
             ok () {
                 this.$Message.info('点击了确定');
             },
             cancel () {
                 this.$Message.info('点击了取消');
             }
         }
     }
 </script> -->
 <style lang="less">
   .modal-img{
     text-align: center;
     padding-bottom: 15px;
     font-size: 14px;
     color: #666;
   }
   .safety-item .ivu-form-item-label{
     font-size: 14px;
   }
   .content-con{
     margin: 15px;
     .safe-title{
       height: 42px;
       line-height: 42px;
       padding: 0 15px;
       border-bottom: 1px solid #f6f6f6;
       color: #333;
       border-radius: 2px 2px 0 0;
       font-size: 14px;
       .title{
         background-color: #eee;
         color: #666;
         height: 18px;
         line-height: 18px;
         display: inline-block;
         padding: 0 6px;
         font-size: 12px;
         text-align: center;
       }
     }
     .safe-content{
       padding: 10px 15px;
       line-height: 24px;
       border-bottom: 1px solid #f6f6f6;
       .text-red{
         color: orangered;
       }
     }
   }
 </style>
